<div class="ddp-pop-preview ddp-type" *ngIf="isShow">
  <!-- top -->
  <div class="ddp-ui-top">
    <div class="ddp-data-name">
      {{'msg.explore.ui.detail.recent.query'| translate}}
      <div class="ddp-data-info"><em class="ddp-icon-info"></em>List up to the last 100 cases.</div>
    </div>
    <em class="ddp-btn-popup-close" (click)="closePopup()"></em>
  </div>
  <!-- //top -->
  <!--  if sourceType is JDBC(database) || StageDB    -->
  <div class="ddp-ui-preview-contents">
    <table class="ddp-table-form ddp-table-type3">
      <colgroup>
        <col width="15%">
        <col width="10%">
        <col width="150px">
        <col width="*">
      </colgroup>
      <thead>
      <tr>
        <th>Date</th>
        <th>User</th>
        <th>Result</th>
        <th>Query</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let recentQuery of recentlyQueriesForDataBase">
        <td>{{ recentQuery['createdTime'] | mdate:'YYYY-MM-DD HH:mm:ss'}}</td>
        <td>{{ recentQuery['createdBy']['fullName'] }}</td>
        <td> <span class="ddp-data-state" [ngClass]="recentQuery.queryResultStatus === 'SUCCESS' ? 'ddp-success' : 'ddp-fail'">{{ recentQuery.queryResultStatus === 'SUCCESS'? 'Success' : 'Fail' }}</span></td>
        <td>
          <div class="ddp-txt-long ddp-type-button">
            <a href="javascript:" class="ddp-btn-selection ddp-fright" (click)="onClickCopy(recentQuery.query)">Copy</a>
            <span class="ddp-txt-name" title="{{ recentQuery.query }}">{{ recentQuery['query'] }}</span>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <!--  if sourceType is JDBC(database) || Stage DB   -->
</div>
